<template>
    <div class="uploadimg">
        <uploader ref="uploader"
            :options="options" 
            :singleFile = true 
            :file-status-text="statusText" 
            @file-added="onFileAdded"
            @file-progress="onFileProgress"
            @file-error="onFileError"
            @file-success="onFileSuccess" 
            class="uploader-example"
        >
			<uploader-unsupport></uploader-unsupport>
			<uploader-drop>
				<uploader-btn class="btn" :single = true :attrs="attrs">上传图片</uploader-btn>
			</uploader-drop>
			<uploader-list></uploader-list>
		</uploader>
    </div>
</template>
<script>
import uploader from 'vue-simple-uploader'
export default {
    props:['upData'],
    watch:{     //监听upData的变化，进行相应的操作即可
        upData: function(a,b){     //a是upData的新值，b是旧值
            console.log('最新值',a)
            this.options.query.type = a.type
            this.options.query.carNum = a.carNum
            this.options.query.uploads = a.uploads
            this.options.query.userId = a.userId
            this.options.query.sign = a.sign
            this.options.query.timestamp = a.timestamp
            this.options.query.verifySecondaryPage = a.verifySecondaryPage
            this.options.query.typeTrailerBusiness = a.typeTrailerBusiness
            this.options.query.uploadsType = a.uploadsType
            console.log('this.options.query',this.options.query)
        }
    },
    data(){
        return{
            uploader_key: new Date().getTime(),//这个用来刷新组件--解决不刷新页面连续上传的缓存上传数据（注：每次上传时，强制这个值进行更改---根据自己的实际情况重新赋值）
        	options: {
				target: process.env.VUE_APP_API + process.env.VUE_APP_PUBLIC_PATH+'carStation/api/cars/readCarInfo.do',//SpringBoot后台接收文件夹数据的接口
				chunkSize: '2048000',//分块大小
                testChunks: false,     //是否开启服务器分片校验
                simultaneousUploads:3,//并发
                query:{
                    type: null,
                    carNum:null,
                    uploads:null,
                    userId:null,
                    verifySecondaryPage:null,
                    typeTrailerBusiness:null,
                    sign:null,
                    uploadsType:null,
                    timestamp:null
                }
			},
			attrs: {
				//accept: 'application/vnd.android.package-archive'
				accept: 'image/*'
			},
			statusText: {
				success: '成功了',
				error: '出错了',
				uploading: '上传中',
				paused: '暂停中',
				waiting: '等待中'
            },
            dataurl:null,
        }
    },
    created(){
        console.log('this.upData-----------',this.upData)
    },
    methods:{
        //上传成功
        onFileSuccess: function (rootFile, file, response, chunk) {
			//注，这里从文件夹每上传成功一个文件会调用一次这个方法
            console.log(response)
            let res = JSON.parse(response)
            res.str = this.upData.type
            this.$emit('upload',res)
			setTimeout(() => {
				const uploaderInstance = this.$refs.uploader.uploader
				uploaderInstance.cancel()
			}, 2000);
			
        },
        //选择文件
        onFileAdded:(file)=>{
            console.log('onFileAdded')
        },
        //上传进度
        onFileProgress(rootFile, file, chunk) {
            console.log(`上传中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`)
            this.$toast.loading({
                message: '上传中...',
                duration:0,
                forbidClick: true,
            });
        },
        //上传出错
        onFileError(rootFile, file, response, chunk) {
            console.log(response)
            this.$toast.fail(`上传失败`);	
        }

    }
}
</script>
<style scoped>
    .uploader{
        width: 100%;
        height: 100%;
    }
    .uploader-drop{
        opacity: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
    .btn{
        width: 100%;
        height: 100%;
    }
    .uploader-list{
        position: absolute;
        top:40%
    }
</style>